<template>
    <Form :model="project" ref="project-form" label-position="top" @submit.native.prevent>
        <div class="head-project">
            <div class="title"><span>配置</span></div>
            <div style="padding-top:14px">
                <Poptip trigger="hover" title="Title" content="content">
                    <Icon type="ios-help-outline" size="16" color="#2d8cf0" style="font-weight: 800;"></Icon>
                </Poptip>
            </div>
        </div>
        <Form-item :label="item.category" v-for="(item,index) in categories" :key="index">
            <CheckboxGroup v-if="item.isMultiSelect == 1" v-model="project.componentsMap[item.category]">
                <Checkbox :label="check.code" v-for="check in item.components" :key="check.code">
                    {{check.cname}}
                </Checkbox>
            </CheckboxGroup>
            <RadioGroup v-if="item.isMultiSelect == 0" v-model="project.componentsMap[item.category]">
                <Radio :label="check.code" v-for="check in item.components" :key="check.code">
                    {{check.cname}}
                </Radio>
            </RadioGroup>
            <Form-item v-if="showMag && item.category === '安全组件' ">
                <span v-if="project.userId !== ''">{{project.userName +'  '+project.departmentName}}<Icon type="close-round" class="close-icon" color="#ed3f14" @click="clearPerson"></Icon></span>
                <person-input type="ghost" :org="false" :single="true" :team="false" @on-selection-data="addperson" style="width: 300px">管理员配置
                </person-input>
            </Form-item>
        </Form-item>
    </Form>
</template>

<script>
    export default {
        data(){
            return {
                categories:[],
                project: {
                    componentsMap: {},
                    userId: '',
                    userName: '',
                    departmentName: ''
                }
            };
        },
        computed:{
            showMag(){
                return this.project.componentsMap['安全组件']==='ressecurity';
            }
        },
        created(){
            this.initData();
        },
        methods:{
            initData(project){
                this.$http.get('/codegen/api/v1/projects/components/default').then((response)=>{
                    this.categories = response.data.categories;
                    this.categories.forEach((item) => {
                        if (item.isMultiSelect === '0') {
                            this.$set(this.project.componentsMap, item.category, item.components[0].code);
                        } else {
                            this.$set(this.project.componentsMap, item.category, []);
                        }
                    });
                    if (project) {
                        for (let key in this.project) {
                            this.project[key] = project[key];
                        }
                    }
                });
            },
            addperson(data){
                this.project.userId = data.personList[0].userId;
                this.project.userName = data.personList[0].userFullName;
                this.project.departmentName = data.personList[0].userDesc;
            },
            getData(){
                return this.project;
            },
            clearPerson(){
                this.project.userId = '';
                this.project.userName = '';
                this.project.departmentName = '';
            },
            valData(){
                if (this.showMag) {
                    if (this.project.userId === '') {
                        this.$Message.error('请配置管理员账号');
                        return false;
                    } else {
                        return true;
                    }
                } else {
                    this.clearPerson();
                    return true;
                }
            }
        }
    };
</script>

<style scoped lang="scss">
    .head-project {
          display: flex;
          justify-content: space-between;
          .title {
              width: 120px;
              padding: 6px 0;
              border-bottom: 1px solid #2d8cf0;
              span {
                  font-size: 18px;
                  font-weight: bold;
              }
          }
          border-bottom: 1px solid #e9eaec;
          margin: 16px 0;

      }
    .close-icon{
        margin-left: 16px;
        cursor: pointer;
    }
</style>